<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon video">
              <el-icon size="32"><VideoCamera /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">126</div>
              <div class="stat-label">总文件数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon storage">
              <el-icon size="32"><FolderOpened /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">15.6 GB</div>
              <div class="stat-label">总存储空间</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon views">
              <el-icon size="32"><View /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">45,680</div>
              <div class="stat-label">总播放量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon duration">
              <el-icon size="32"><Timer /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">2,090h</div>
              <div class="stat-label">总时长</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作 -->
    <el-card class="quick-actions" style="margin-bottom: 24px;">
      <template #header>
        <span>快速操作</span>
      </template>
      <el-row :gutter="16">
        <el-col :span="6">
          <el-button type="primary" size="large" style="width: 100%; height: 80px;" @click="$router.push('/upload')">
            <div style="text-align: center;">
              <el-icon size="24"><Upload /></el-icon>
              <div style="margin-top: 8px;">上传文件</div>
            </div>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="large" style="width: 100%; height: 80px;" @click="$router.push('/media-library')">
            <div style="text-align: center;">
              <el-icon size="24"><VideoCamera /></el-icon>
              <div style="margin-top: 8px;">媒体库</div>
            </div>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="large" style="width: 100%; height: 80px;" @click="$router.push('/categories')">
            <div style="text-align: center;">
              <el-icon size="24"><Menu /></el-icon>
              <div style="margin-top: 8px;">分类管理</div>
            </div>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="large" style="width: 100%; height: 80px;" @click="$router.push('/analytics')">
            <div style="text-align: center;">
              <el-icon size="24"><TrendCharts /></el-icon>
              <div style="margin-top: 8px;">数据分析</div>
            </div>
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 最近活动 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>最近活动</span>
          <el-button type="primary" size="small" @click="$router.push('/media-library')">
            查看全部
          </el-button>
        </div>
      </template>
      
      <el-timeline>
        <el-timeline-item timestamp="2024-01-15 10:30" placement="top">
          <el-card>
            <h4>上传了新视频</h4>
            <p>精彩电影预告片.mp4 已成功上传并处理完成</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024-01-14 15:20" placement="top">
          <el-card>
            <h4>创建了新分类</h4>
            <p>新增了"音乐MV"分类</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024-01-13 09:15" placement="top">
          <el-card>
            <h4>批量上传完成</h4>
            <p>5个音频文件已全部处理完成</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 仪表盘页面
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
}

.stat-icon.video {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.storage {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.views {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.duration {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 